
<template>

  <div>
    <div style="margin-left: 1000px">
      <el-button type="primary" @click="$router.push('readerInfo')">新增读者</el-button>
      <el-button type="primary"  @click="deleteMany">批量删除</el-button>
    </div>

    <el-table
      ref="multipleTable"
      :data="readers"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column
        prop="readerPic"
        label="头像"
        align="center"
        width="150">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.readerPic"
            fit="scale-down"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="readerName"
        label="昵称"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="readerTel"
        label="电话"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="readerPassword"
        label="密码"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="readerEmail"
        label="邮箱"
        align="center"
        width="200">
      </el-table-column>
      <el-table-column
      prop="readerBalance"
      label="余额"
      align="center"
      width="120">
    </el-table-column>
      <el-table-column
        prop="readerRechargeSum"
        label="充值总额"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="readerRole"
        label="会员级别"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="readerTicket"
        label="月票数"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="100">
        <template slot-scope="scope">
          <el-button @click="deleteReader(scope.row.id)" type="text" size="small">删除</el-button>
          <el-button @click="updateManager(scope.row.id)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize1"
        layout="sizes,total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>


</template>


<script>
  import axios from 'axios';
    export default {
        name: "reader1",
        data(){
          return{
            readers:[],
            ids:[],
            currentPage:1,
            total:0,
            pageSize1:5
          }
        },
        methods:{
          findAll(){
            axios.get('http://localhost:8888/reader/findAll?page='+this.currentPage+"&size="+this.pageSize1).then(res=>{
              if(res.data.code==0){
                this.readers=res.data.data;
                this.total=res.data.total;
              }
            })
          },
          handleSelectionChange(val) {
            for(var i= 0;i<val.length;i++){
              var id = val[i].id;
              this.ids.push(id);
            }
          },
          deleteReader(id){
            axios.post('http://localhost:8888/reader/delete',{id:id}).then(res=>{
              if(res.data.code==0){
                this.findAll();
              }
            })
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage=val;
            this.findAll();
          },
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize1=val;
            this.findAll();
          },
          updateManager(id){
            this.$router.push({name:'readerInfo',params:{id:id}});
          },
          deleteMany(){
            axios.post('http://localhost:8888/reader/deleteByIds',{ids:this.ids}).then(res=>{
              if(res.data.code==0){
                this.findAll();
              }
            })
          }

        },
        mounted() {
          this.findAll();
        }
    }
</script>

<style scoped>

</style>
